<template>
  <div class="card">
    <div class="title">{{ title }}</div>
    <ul class="list" v-if="dataList.length">
      <li class="item" :style="itemWidth ? itemWidth : ''" v-for="item in dataList" :key="item.id" @click="handleClickToDetail(item.id)">
        <div class="playCount" v-if="isPlayCount">
          <i class="iconfont icon-24gl-play"></i>{{ item.playCount | wan }}
        </div>
        <img :src="item.picUrl" :alt="item.name" />
        <span>{{ item.name }}</span>
        <!-- <span>{{ item.artistName }}</span> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: ['title', 'dataList', 'isPlayCount', 'itemWidth'],
  filters: {
    Wan (value) {
      if (!value) return
      return value < 10000 ? value : parseInt(value / 10000) + '万'
    }
  },
  methods: {
    handleClickToDetail (id) {
      if (!this.itemWidth || !(Object.keys(this.itemWidth).length - 1)) {
        this.$router.push(`/detail/${id}`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  width: 100%;
  margin-bottom: 10px;
  .title {
    padding: 10px;
    font-weight: 600;
    font-size: 18px;
  }
  .list {
    width: 100%;
    overflow: hidden;
    .item {
      // background-color: greenyellow;
      position: relative;
      width: 20%;
      float: left;
      text-align: center;
      img {
        width: 90%;
        // height: 198px;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
        cursor: pointer;
      }
      span {
        margin: 10px 0;
        padding: 0 10px;
        height: 42px;
        // 多行溢出省略
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        // text-overflow: ellipsis;
      }
      .playCount {
        position: absolute;
        top: 5px;
        right: 15%;
        color: white;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.1);
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
